<template>
	<view class="doubleEleven">
		<view class="doubleEleven_content df df-justify-content-alin">
			<view class="doubleEleven_box">
				<rich-text class="content" :nodes="info.content"></rich-text>
			</view>
		</view>
		
		<view class="pay_info">
			<view class="pab-text df df-justify-content-between df-align-items">
				<view class="">
					<view class="package_number">
						
						<view class="calc">
							<text style="margin-right: 8rpx;">每月限{{info.limit || "***"}}升</text>
							<text>总计：{{info.nums}}升</text>
						</view>
					</view>
					
					<text>有效时间: {{info.valid}} 天</text>
					<view class="money" style="font-size: 28rpx;">本活动仅限浙江壳牌28座加油站参与，</view>
					<text class="money" style="font-size: 28rpx;">可叠加壳牌会员优惠使用。</text>
				</view>
				
				<view>
					<text class="money">￥</text> <text class="money">{{info.price}}元</text>
				</view>
			</view>
		</view>
		
		<view class="pay_btn df df-justify-content-between df-align-items">
			 <view class="">
			 	<text style="font-weight: bold;">合计：</text>
			 	<text class="money">{{info.price}}元</text>
			 </view>
			 
			 <view class="payBtn df df-justify-content-alin" @click="goVipPay">
			 	去抢购
			 </view>
		</view>
		
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您还没有填写收货地址,是否前往填写？" @confirm="dialogConfirm"
			@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import api from '@/api/home.js';
	import mapi from '@/api/mine.js';
	import parseHtml from "@/utils/html-parser.js";
	export default {
		data() {
			return {
				info: '',   // 富文本信息
				from: {
					address_id: '',  // 地址 id
					// #ifdef MP-ALIPAY
					pay_way: 2,   // 支付宝
					// #endif
					// #ifndef MP-ALIPAY
					pay_way: 1,  // 微信
					// #endif
					promoter_id: '',  // 推广上级id
				},
				randomInfo: '',  // 缓存的订单数据
				is_address: '',  // 地址是否提交
				paying: false, // 支付节流
			}
		},
		
		onLoad(option) {
			this.getActiveInfoApi();
			this.getUserInfoApi();
			this.from.address_id = uni.getStorageSync('address_id');
			this.from.promoter_id = uni.getStorageSync('promoter_id');
			console.log(option.id);
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		
		methods: {
			// 个人信息
			async getUserInfoApi(){
				let res = await mapi.getUserInfo()
				this.is_address = res.data.is_address
			},
			// 地址填写
			dialogConfirm(){
				uni.navigateTo({
					url: '/pages/mine/shipAddress/index'
				})
			},
			// 获取套餐信息
			async getActiveInfoApi(){
				let res =await api.getActiveInfo({});
				
				if(res.code == 1){
					let info = JSON.parse(JSON.stringify(res.data));
					// 清空自带样式，自行处理图片文字
					info.content = info.content.replace(/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
					            .replace(/<p>/ig, '<p style="font-size: 15Px; line-height: 25Px;">')
					            .replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
					            .replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
					            .replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
					            .replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
					            .replace(/<img([\s\w"-=\/\.:;]+)/ig, '<img$1 style="width: 100%;"');
					// 转换成 node 节点
					info.content = parseHtml(info.content);
					this.info = info;
				}
			},
			// 创建订单
			goVipPay(){
				if(!this.paying){
					api.memberOrder(this.from).then(res => {
						if (res.code == 1) {
							this.paying = true;
							this.randomInfo = res.data;
							this.wxPay();
						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							});
						}
					});
				}
			},
			// 拉起支付
			wxPay(){
				let that = this;
				uni.showLoading({
					title: '请稍等',
					mask: true
				});
				// this.paying = false;
				const orderId = this.randomInfo.order_id;
				
				// 获取微信支付参数
				api.memberpay({
					member_order_id: orderId,
				}).then(rs => {
					if (rs.code == 1) {
						uni.showToast({
							title: rs.msg,
							icon: 'none',
							duration: 1000
						});
						// #ifdef MP-WEIXIN
						// 拉起微信支付
						uni.requestPayment({
							// ...rs.data.miniPayRequest,   // 银联
							...JSON.parse(rs.data.prePayTn), // 易宝
							provider: 'weixn',
							// orderInfo: res.data.order_id,
							orderInfo: orderId,
							success: () => {
								that.randomInfo = {};
								uni.hideLoading();
								uni.switchTab({
									url: '/pages/order/index'
								});
							},
							complete: () => {
								// that.$refs.random.close();
							},
							fail: () => {
								uni.hideLoading();
								that.paying = false;
							}
						});
						// #endif
						
						// #ifdef MP-ALIPAY
						// 拉起支付宝支付
						my.tradePay({
						  // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no
						  tradeNO: rs.data.prePayTn,
						  success: (res) => {
							uni.hideLoading();
							if(res.resultCode == '6001'){
								that.paying = false;
								return;
							};
							that.randomInfo = {};
						    if(this.is_address == 0){
						    	this.$refs.alertDialog.open()
						    }else{
						    	uni.switchTab({
						    		url: '/pages/home/index'
						    	});
						    }
						  },
						  complete: () => {
							// that.$refs.random.close();
						  },
						  fail: (res) => {
						    uni.hideLoading();
						    that.paying = false;
						  }
						});
						// #endif
					} else if (rs.code == 101) {
						uni.showToast({
							title: rs.msg,
							icon: 'none',
							duration: 1000
						});
						uni.hideLoading();
						uni.switchTab({
							url: '/pages/order/index'
						});
					};
				}).catch(() => {
					that.paying = false;
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	
	.doubleEleven{
		.money{
			font-size: 32rpx;
			font-weight: bold;
			color: #F12F63;
		}
		
		.doubleEleven_content{
			padding-bottom: 310rpx;
			overflow: hidden;
			
			.doubleEleven_box{
				// margin-top: -100rpx;
				
				.content{
				      ::v-deep img{
				        disblay:block !important;
				        max-width: 100% !important;
				        height: auto !important;
						object-fit: contain;
				        margin: 0 auto !important;
				      }
				}
			}
		}
		.pay_info{
			padding: 20rpx;
			box-sizing: border-box;
			width: 100%;	
			font-size: 28rpx;
			height: 180rpx;
			position: fixed;
			font-weight: bold;
			background-color: #FFF3F0;
			bottom: 100rpx;
			
			
		}
		
		.pay_btn{
			width: 100%;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			background-color: #FFF;
			border-top: 2rpx solid #EEE;
			font-size: 32rpx;
			padding-left: 20rpx;
			.payBtn{
				width: 200rpx;
				height: 100%;
				background: #F12F63;
				color: #FFF;
			}
		}
	}
</style>